<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
    <!--validate校验库-->
    <script src="js/jquery.validate.js"></script>
    <!--国际化库，中文提示-->
    <script src="js/messages_zh.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#loginForm").validate({
                    rules:{
                        username: {
                            required: true,
                            rangelength: [6, 18]
                        },
                        password: {
                            required: true,
                            rangelength: [6, 18]
                        }
                    },
                    messages: {
                        username: {
                            required: "用户名不能为空",
                            rangelength: "用户名长度必须在6到18位之间"
                        },
                        password: {
                            required: "密码不能为空",
                            rangelength: "密码长度必须在6到18位之间"
                        }
                    }});
        });
    </script>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #faf6f5;
        }

        .header {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
        }

        .form-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        form {
            display: inline-block;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

    </style>
</head>
<body>
<div class="header">
    <h3>学生管理系统</h3>
</div>
<c:if test="${not empty msg}">
    <p style="color:red;">${msg}</p>
</c:if>
<div class="form-container">
    <form id="" action="userservlet?method=userLogin" method="post" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" placeholder="请输入用户名"/><br/>
        <input type="password" name="password" placeholder="请输入密码"/><br/>
        <input type="submit" value="登录"/><br/>
    </form>
</div>
</body>
</html>
